<template>
    <div class="ArticleCreate">
        <div>
            <h2>创建新话题</h2>
        </div>
        <el-card>
            <div slot="header" >
                <el-input v-model="editForm.Title" :rows="2" placeholder="标题"></el-input>
            </div>
            <div>
                <kt-markdown ref="markdownEditor" v-model="editForm.ArticleContent"></kt-markdown>
            </div>
        </el-card>

        <div style="float:right;padding-top:40px;">
            <el-select v-model="editForm.Type" placeholder="请选择类别">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button  type="primary" @click="CreateArticle" style="margin-left:20px;">创建</el-button>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            Title:'',
            editForm:{
                ArticleContent:'',
                Author:'',
                AuthorId:'',
                Createdon:'',
                LastUpdateTime:'',
                Tag:'',
                Title:'',
                Type:'',
            },
            loading:false,
            mainId:'',
            options: [{
                  value: 1,
                  label: '分享'
                }, {
                  value: 2,
                  label: '讨论'
                }, {
                  value: 3,
                  label: '问答'
                }, {
                  value: 4,
                  label: '吐槽'
                }, {
                  value: 5,
                  label: '建议'
                },{
                  value: 6,
                  label: '招聘'
                },{
                  value: 7,
                  label: '其他'
                }],
            }
    },
    mounted(){
        if(!kt.isNullOrWhiteSpace(this.$route.params.id)){
            this.mainId=this.$route.params.id;
            this.onUpdate();
        }else{
            this.onCreate();
        }
    },
    components: {
    },
    methods:{
        PageChange:function(){
            this.loadData();
        },
        onUpdate(){
            this.loadData();
        },
        onCreate(){
            
        },
        loadData() {
            try {
                var params={
                    Id:this.mainId
                };
                var requestStr = "/api/Article/GetArticleById";
                this.loading = true;
                kt.post(requestStr,params)
                    .then(res => {
                      this.editForm = res.PostData;
                      this.loading = false;
                    })
                    .catch(error => {
                      kt.showErrorToast(error.message);
                      this.loading = false;
                    });
            } catch (error) {
                kt.showErrorToast(error.message);
                this.loading = false;
            }
        },
        CreateArticle(){
            var params={
                Title:this.editForm.Title,
                ArticleContent:this.editForm.ArticleContent,
                Createdon:new Date(),
                LastUpdateTime:new Date(),
                Type:this.editForm.Type,
                Author:"curry",
                AuthorId:1
            };
            var requestStr = "/api/Article/CreateArticle";
            this.loading = true;
            kt.post(requestStr,params)
                .then(res => {
                  this.editForm = res.PostData;
                  this.loading = false;
                })
                .catch(error => {
                  kt.showErrorToast(error.message);
                  this.loading = false;
                });
        },
        formatter(row, column) {
            switch(row.Type){
                case 1:
                return "分享";
                case 2:
                return "讨论";
                case 3:
                return "问答";
                case 4:
                return "吐槽";
                case 5:
                return "建议";
                case 6:
                return "招聘";
                case 7:
                return "其他";
            }
        }
    }
}
</script>

<style>
.ArticleCreate .el-card__header{
    height:45px;
    padding: 5px 10px;
}
.ArticleCreate .el-input__inner{
    border: 0ch;
    height:35px;
}
.ArticleCreate .el-card__body{
    padding: 0ch;
}
.ArticleCreate .tui-editor-defaultUI{
    border: 0ch;
}
</style>
